<template>
  <div>
    <el-card>
      <div slot="header" class="header">
        <div class="categ">
          <span>区域分布</span>
          <el-radio-group v-model="value">
            <el-radio-button label="岛内" />
            <el-radio-button label="岛外" />
          </el-radio-group>
        </div>
      </div>
      <!-- 饼图 -->
      <div>
        <div ref="charts" class="charts" />
      </div>
    </el-card>
  </div>
</template>

<script>
import { setHLDistrict, setSMDistrict } from '@/api/activityCharge'

import echarts from 'echarts'
export default {
  name: '',
  data() {
    return {
      value: '岛内',
      hlNum: 0,
      smNum: 0
    }
  },
  mounted() {
    this.setHLDistrict()
    this.setSMDistrict()
  },
  methods: {
    // 查询湖里区的订单
    async setHLDistrict() {
      const res = await setHLDistrict()
      if (res.code !== 200) return this.$message.error('获取失败')
      this.hlNum = res.data[0].counts
    },
    async setSMDistrict() {
      const res = await setSMDistrict()
      if (res.code !== 200) return this.$message.error('获取失败')
      this.smNum = res.data[0].counts
      // 饼图
      const mychart = echarts.init(this.$refs.charts)
      mychart.setOption(
        {
          title: {
            text: '湖里区',
            subtext: '1048',
            left: 'center',
            top: 'center'
          },
          tooltip: {
            trigger: 'item'
          },
          series: [
            {
              name: '',
              type: 'pie',
              radius: ['40%', '70%'],
              avoidLabelOverlap: false,
              itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
              },
              label: {
                show: true,
                position: 'outsize'
              },
              labelLine: {
                show: true
              },
              data: [
                { value: this.hlNum, name: '湖里区' },
                { value: this.smNum, name: '思明区' }
              ]
            }
          ]
        }
      )
      // 事件
      mychart.on('mouseover', (params) => {
      // 获取鼠标移入的值
        const { name, value } = params.data
        // 重新设置标题
        mychart.setOption({
          title: {
            text: name,
            subtext: value
          }
        })
      })
    }
  }
}
</script>

<style scoped>
.categ{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.header{
  border-bottom: 1px solid #eee;
  padding: 5px 0px;
}
.charts{
  height: 300px;
  width: 100%;
}
</style>
